<!-- ProductItem.vue -->
<template>
  <view class="product-item flex margin-top">
    <view class="tu">
      <image :src="product.image" class="product-image"></image>
    </view>
    <view class="product-info flex-direction justify-between padding">
      <view class="product-title color-black text-bold text-df">{{ product.title }}</view>
      <view class="bottom flex justify-between align-center">
        <view class="product-price color-red text-bold text-xxl">¥{{ product.price }}</view>
        <view class="product-sold text-sm color-grey">已售{{ product.sold }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductItem',
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.product-item {
  width: 100%;
  height: 234rpx;
  border-radius: 20rpx;
  border: 1px solid #e0e0e0;

}
.tu{
  width: 272rpx;
  height: 234rpx;
  
}
.product-info{
  height: 234rpx;
}
.product-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bottom{
  margin-top: 80rpx;
}







</style>